<template>
  <div class="chart">
    <van-nav-bar title="市场数据" left-arrow @click-left="onClickLeft" />
    <div id="topBtn"></div>
    <van-dropdown-menu :close-on-click-overlay="true">
      <van-dropdown-item @change="change" ref="menu1">
        <template #title>
          {{ value }}
        </template>
        <template #default>
          <van-index-bar>
            <div class="item" v-for="(value, key) in cityData" :key="key">
              <van-index-anchor :index="key" />

              <div
                @click="checkCity(item[0])"
                v-for="(item, index) in value"
                :key="index"
              >
                <van-cell :title="item[0]" />
              </div>
              <!-- </div> -->
              <!-- </div> -->
            </div>
          </van-index-bar>
        </template>
      </van-dropdown-item>
      <van-dropdown-item ref="menu2">
        <template #title>
          {{ value2 }}
        </template>
        <template #default>
          <van-index-bar :index-list="[]">
            <div class="item" v-for="(item, index) in jobList" :key="index">
              <div @click="checkWork(item)">
                <van-cell :title="item" />
                <!-- </div> -->
              </div>
            </div>
          </van-index-bar>
        </template>
      </van-dropdown-item>
    </van-dropdown-menu>
    <!-- 收入饼图 -->
    <div class="percent">
      <div class="title">工资收入</div>
      <div class="futitle">
        <span class="qujian">区间</span>
        <span class="zhanbi">占比</span>
      </div>
      <wagesChart :percentList="percentList" />
      <div class="perBottom">近1年<span>17920</span>份样本/可信度: 高</div>
    </div>
    <!-- 经验折线图 -->
    <div class="expChart">
      <div class="expTitle">工作经验</div>
      <expChart :experienceList="experienceList" />
    </div>
    <!-- 平均工资折线图 -->
    <div class="average">
      <div class="aveTitle">历年平均工资变化趋势</div>
      <aveChart :aveList="aveList" />
    </div>
    <!-- 就业形势折线图 -->
    <div class="job">
      <div class="jobTitle">就业形势</div>
      <jobChart :jobChartList="jobChartList" />
      <img src="@/assets/1.png" alt="" />
      <div class="tipBox">
        <div class="tipTitle">说明:</div>
        <div class="tipContent">
          曲线越向上代表市场需求量越大，就业情况越好。反之，代表该类职位需求量较少。该数据由各地招聘网站统计而来，可能因抓取系统稳定性等因素而致使数据偏离客观实情，仅供参考。
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import cityData from '@/utils/cityData.js'
// import F2 from '@antv/f2'
import wagesChart from './wagesChart.vue'
import expChart from './expChart.vue'
import aveChart from './aveChart.vue'
import jobChart from './jobChart.vue'
import { chartIndexes, chartStatistics } from '@/api/api.js'
export default {
  components: {
    wagesChart,
    expChart,
    aveChart,
    jobChart
  },
  data () {
    return {
      cityShow: false,
      workShow: false,
      occShow: false,
      cityData: {},
      // indexList: [],
      cityWorkObj: {
        city: '北京',
        position: '技术经理'
      },
      jobList: [],
      value: '北京',
      value2: '技术经理',
      percentList: [], // 饼图
      experienceList: [], // 经验折线图
      aveList: [], // 平均工资则线图
      jobChartList: []
    }
  },
  watch: {
    value (val) {
      for (var item in this.cityData) {
        this.cityData[item].map(i => {
          if (val === i[0]) {
            this.jobList = i[1]
          }
        })
        // console.log(newArrr)
      }
      // console.log(this.jobList)
      // 双向绑定菜单栏右边数据
      this.value2 = this.jobList[0]
      // 动态添加cityWorkObj数据
      this.$set(this.cityWorkObj, 'position', this.value2)
      this.getChartData()
      // console.log(this.jobList)
    }
    // value2 () {
    //   this.getChartData()
    // }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    async getData () {
      const res = await chartIndexes()
      this.cityData = res.data
      console.log(this.cityData)
    },
    checkCity (city) {
      this.value = city
      this.$set(this.cityWorkObj, 'city', city)
      this.$refs.menu1.toggle()
      // console.log(city)
    },
    checkWork (work) {
      this.value2 = work
      this.$refs.menu2.toggle()
      // console.log(work)
      this.$set(this.cityWorkObj, 'position', work)
      this.getChartData()
    },
    change () {
      // console.log(1)
    },
    async getChartData () {
      const res = await chartStatistics(this.cityWorkObj)
      this.percentList = res.data.percentSalary
      this.experienceList = res.data.experienceSalary
      this.aveList = res.data.yearSalary
      this.jobChartList = res.data.employmentNum
      console.log(res)
    },
    // 初始化右边栏数据
    async fn () {
      const res = await chartIndexes()
      // this.cityData = res.data
      // console.log(this.cityData)
      this.jobList = res.data.B[1][1]
      // console.log(this.jobList)
    }
  },
  created () {
    this.getData()
    this.getChartData()
    this.$nextTick(() => {
      this.fn()
    })
  },
  mounted () {
    // console.log(this.cityWorkObj)
  }
}
</script>

<style lang="less" scoped>
.chart {
  /deep/ .van-nav-bar__arrow {
    font-size: 18px;
    color: #000;
  }
  #topBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    .city {
      padding-right: 130px;
      .cityName {
        font-size: 14px;
      }
      .iconColor {
        color: red;
      }
    }
    .occupation {
      .occName {
        font-size: 14px;
      }
      .iconColor {
        color: red;
      }
    }
  }
  #canvas {
    width: 100px;
    height: 100px;
  }
  .percent {
    padding: 16px;
    .title {
      font-size: 20px;
    }
    .futitle {
      // display: flex;
      padding-left: 220px;
      .qujian {
        font-size: 14px;
        color: #ccc;
        padding-right: 35px;
      }
      .zhanbi {
        font-size: 14px;
        color: #ccc;
      }
    }
    .perBottom {
      font-size: 14px;
      color: #ccc;
      text-align: center;
    }
  }
  .expChart {
    padding: 16px;
    .expTitle {
      font-size: 20px;
    }
  }
  .average {
    padding: 16px;
    .aveTitle {
      font-size: 20px;
    }
  }
  .job {
    position: relative;
    padding: 16px;
    .jobTitle {
      font-size: 20px;
    }
    img {
      position: absolute;
      left: 26px;
      top: 64px;
    }
    .tipBox {
      .tipTitle {
        font-size: 12px;
        margin-bottom: 10px;
      }
      .tipContent {
        font-size: 12px;
      }
    }
  }
}
</style>
